const { PureComponent } = React;
const {
  Layout,
  Menu,
  Breadcrumb,
  Icon,
  version,
  Button,
  Row,
  Col,
  Avatar,
  Badge,
  Alert,
  notification,
  Table,
  Divider,
  Tag,
  Timeline,
  Spin,
  Input,
  Space
} = antd;
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu, ItemGroup } = Menu;
const { Search } = Input;

const columns = [
  {
    title: 'Time',
    dataIndex: 'Time',
    key: 'Time',
  },
  {
    title: 'Source',
    dataIndex: 'Source',
    key: 'Source',
  },
  {
    title: 'SrcPort',
    dataIndex: 'SrcPort',
    key: 'SrcPort',
  },
  {
    title: 'Dstination',
    dataIndex: 'Dstination',
    key: 'Dstination',
  },
  {
    title: 'DstPort',
    dataIndex: 'DstPort',
    key: 'DstPort',
  },
  {
    title: 'Protocol',
    dataIndex: 'Protocol',
    key: 'Protocol',
  },
];

const onSearch = value => console.log(value);

class APP extends React.Component {
  constructor(props) {
    super(props);

    var ws_server =
      "ws://" +
      document.location.hostname +
      ":" +
      (parseInt(location.port) + 1) +
      "/ws";
    
    console.log(ws_server);

    this.state = {
      pcap_info_list: [],
      ws:new WebSocket(ws_server)
    }
  }

  componentDidMount() {
    const that = this;

    that.state.ws.onopen = function (event) {
      that.state.ws.send(
        JSON.stringify({
          Action: "get_test"
        })
      )
    }

    that.state.ws.onmessage = function (event) {
      if (event.data != "iamok") {
        var recv_json = JSON.parse(event.data);

        switch (recv_json.Action) {
          case "get_test": {
            console.log(recv_json.JSONValue);

            that.setState({
              pcap_info_list: recv_json.JSONValue
            })

            break;
          }
        }
      }
    }
  }

  pcap_info_list_view() {
    const that = this;

    if (that.state.pcap_info_list.length == 0) {
      return (
        <div style={{ padding: 200, textAlign: "center" }}>
          <Spin size="large" />
        </div>
      )
    } else {
      return (
        <Table columns={columns} dataSource={that.state.pcap_info_list} />
      )
    }
  }

  render() {
    const that = this;

    return (
  <Layout className="layout">
    <Header>
      <Row>
        <Col span={4}>
          <div className="logo">
            <div className="title">Offline Analysis</div>
          </div>
        </Col>
            <Col span={20}>
          <Search className="Search" placeholder="input search text" onSearch={onSearch} enterButton  />
        </Col>
      </Row>
          
    </Header>
    <Content style={{ padding: '50 50px' }}>
          <div className="site-layout-content">
            {that.pcap_info_list_view()}
      </div>
    </Content>
    <Footer style={{ textAlign: 'center' }}>Offline Analysis ©2021 Created by FiberHome</Footer>
  </Layout>
    );
  }
}

ReactDOM.render(<APP />, document.getElementById("APP"));
